<template>
    <div class="header">
        <!-- 导航菜单 -->
        <el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" @select="handleSelect">
            <el-menu-item index="1">Processing Center</el-menu-item>
            <el-sub-menu index="2">
                <template #title>Workspace</template>
                <el-menu-item index="2-1">item one</el-menu-item>
                <el-menu-item index="2-2">item two</el-menu-item>
                <el-menu-item index="2-3">item three</el-menu-item>
                <el-sub-menu index="2-4">
                    <template #title>item four</template>
                    <el-menu-item index="2-4-1">item one</el-menu-item>
                    <el-menu-item index="2-4-2">item two</el-menu-item>
                    <el-menu-item index="2-4-3">item three</el-menu-item>
                </el-sub-menu>
            </el-sub-menu>
            <el-menu-item index="3" disabled>Info</el-menu-item>
            <el-menu-item index="4">Orders</el-menu-item>
        </el-menu>
        <!-- 输入框 -->
        <div class="demo-input-size">
            <el-input v-model="input1" class="w-50 m-2 eit" size="large" placeholder="Please Input" />
        </div>
        <!-- 按钮 -->
        <el-button class="bt" type="primary" size="large" @click="init" plain>Primary</el-button>


    </div>
    <div class="content">
        <!-- 导入列表 -->
        <div class="back">
            <div class="p1">当前搜索关键词：<a href="#">{{ data.Share_resource.resource_name }}</a></div>
            <div class="line">
                <hr>
            </div>
            <!-- <div class="tit">
                <form action="">
                    <input class="i1" type="text" placeholder="请输入搜索内容" v-model="data.Share_resource.resource_name">
                    <button class="btn1" type="submit" @click="init">点击搜索</button>
                </form>
            </div> -->
            <div>
                <ul>
                    <div class="item">
                        <div class="divleft">1号大厅</div>
                        <div class="divright">
                            <p @click="isShow = !isShow">{{ isShow ? "收起 ▽" : "展开 △" }}</p>
                        </div>
                        <div style="clear: both; overflow: hieedn;"></div>
                    </div>
                    <div v-show="isShow">
                        <li v-for="s in bdata.Share_resourceList">
                            <div class="d1">
                                <div class="msg">{{ s.resource_name }} 链接：<a href="#">{{ s.create_by }}云盘</a> {{
                                    s.resource_pw }}</div>
                                <input class="cbtn" type="button" value="复制链接">
                                <br>
                            </div>
                            <div class="bl">

                            </div>
                        </li>
                    </div>
                </ul>
            </div>
        </div>
    </div>
    <div class="footer">
        <!-- 轮播图 -->
        <div class="block text-center" m="t-4">
            <el-carousel trigger="click" height="250px">
                <el-carousel-item v-for="item in imgs" :key="item.id">
                    <img v-lazy :data-src="item.src" alt="" width="100%" height="100%">
                </el-carousel-item>
            </el-carousel>
        </div>
    </div>
</template>
<script lang="ts" setup>
// 导航菜单
import { ref } from 'vue'
const activeIndex2 = ref('1')
const handleSelect = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
}
// 输入框
const input1 = ref()
// 导入列表
import { reactive } from 'vue';
import { AxiosRequestConfig } from 'axios';
import axios from 'axios';

interface Resource {
    resource_id: 0,
    uuid: '',
    resource_name: '',
    resource_path: '',
    resource_pw: '',
    message: '',
    amount: '',
    qr_url: '',
    create_by: '',
    create_time: '',
    update_by: '',
    update_time: '',
    remark: '',
    poster: '',
    user_id: 0,
    isShow: false
}

let data = reactive({
    Share_resource: {
        resource_name: ''
    }
});
let bdata = reactive({
    Share_resourceList: [] as Resource[]
});

//实例
const init = () => {
    postData('resourse/selectByName', { resource_name: input1.value })
        .then((responseData) => {
            data.Share_resource.resource_name = input1.value;
            console.log('POST 请求成功:', responseData);
            bdata.Share_resourceList = responseData;
            for (let s of bdata.Share_resourceList) {
                if(s.resource_pw==""){
                }else{
                    s.resource_pw = ("提取码:"+s.resource_pw ) as '';
                }
                s.isShow = false;
            }
        })
        .catch((error) => {
            console.error('POST 请求失败:', error);
        });
}
// axios请求
async function postData(url: string, data: any): Promise<any> {
    const config: AxiosRequestConfig = {
        method: 'post',
        url: url,
        data: data,
    };

    try {
        const response = await axios(config);
        console.log(response.data);
        return response.data;
    } catch (error) {
        console.error(error);
        throw error;
    }
}
// 轮播图
const imgs = ref([
    {id:1,src:require('../assets/lb01.webp')},
    {id:2,src:require('../assets/lb02.webp')},
    {id:3,src:require('../assets/lb03.webp')},
    {id:4,src:require('../assets/lb04.webp')},
])

const isShow = ref(false)
</script>

<style>
/* 按钮 */
.bt {
    position: absolute;
    top: 10px;
    left: 1300px;
}

/* 输入框 */
.demo-input-size {
    width: 300px;
    position: absolute;
    top: 10px;
    left: 1000px;
}

/* 导入列表 */
.bl {
    width: 100%;
    height: 12px;
    background-image: url("@/assets/bl.png");
}

.d1 a {
    text-decoration: none;
    color: rgb(105, 144, 216);
    font-size: 18px;
}

.d1 a:hover {
    text-decoration: underline;
    color: rgb(250, 19, 19);
}

.msg {
    line-height: 60px;
    font-size: 18px;
    height: 75%;
    /* border: 1px solid #bfa; */
}

.d1 {
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    height: 85px;
    border-top: 1px solid rgb(122, 122, 133);
    padding: 10px 10px;
    border-width: 1px 0px;
    border-top-width: 3px;
    box-shadow: 0px 2px 2px 0px #ccc inset;

}

li {
    margin: 20px 0;
    /* border: 1px solid red; */

}

.cbtn {
    background-color: #0069be;
    color: white;
    margin-left: 92%;
    border-radius: 20px;
    padding: 2px 8px;
    border-width: 0px;
    font-size: 12px;
}

.tit {
    margin-bottom: 10px;
    font-size: 0px;
}

.btn1 {
    font-weight: bold;
    background-color: #007BFF;
    color: white;
    font-size: 18px;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    width: 25%;
    height: 45px;
    border-width: 0px;
    vertical-align: top;
}

.i1 {
    text-indent: 10px;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    width: 75%;
    height: 45px;
    border-width: 0.5px;
}

.p1 {
    margin-top: 20px;
}

ul {
    list-style: none;
}

hr {
    border: 1px solid rgb(253, 123, 123);
}

.line {
    margin: 10px 0px;
}

.back {
    width: 40%;
    margin: auto;
}

.divleft {
    float: left;
    color: red;
    font-size: 18px;
}

.divright {
    margin-top: 5px;
    float: right;
    font-size: 16px;
}

.divright p {
    cursor: pointer;
}

body {
    min-width: 1800px;
    overflow: scroll;

}

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-size: 14px;
}
/* 布局 */
.content{
    height: 100vh;
}
</style>
